<template>
	<view class="container">
		<uni-forms :modelValue="form" :rules="rules" ref="formRef" >
	<!--<view class="body"> -->
		 
	<view class="title">绑定手机号</view>
	
	<!--<view class="input-content">-->
		<uni-forms-item name="mobile"  >
	        <view class="phone-content">
	       	            <view class="phone-prefix">+86</view>
	                <input :focus="focusMobile" @blur="focusMobile = false" class="input"  type="number"   placeholder="请输入手机号" 
					v-model="form.mobile"
	                />
	         </view>
			 
			</uni-forms-item>
			<!--
			<uni-forms-item name="code"  >
	       <view class="captcha-content">
	      	            <view class="phone-content captcha">
	                <input
	                    class="input" 
	                    placeholder="请输入验证码" 
						v-model='form.code'
	                />
					</view>
	             <view class="verification-btn" @click="sendCode">
	                <button type="primary" class="verification-code"> {{btnContent}} </button>
	           	        </view>
	           	    </view>
					
			</uni-forms-item>
			-->
	 <!--  </view> -->
	<uni-forms-item >
	    <button class="bind-btn" @click="bindTap">绑定</button>
	   </uni-forms-item >
		   
<!--	</view> -->
	  </uni-forms>
	</view>
</template>

<script>
	
export default{
	data () {
		const validatePassword = (rule, value, callback) => {
		  if (value === '') {
		    callback(new Error('请输入手机号'))
		  } 
		}
		return {
			user: uni.getStorageSync('weather2024'),
			form:{
				
			},
			rules: {
			 mobile: {
				rules:[
					// 校验 username 不能为空
					{
						required: true,
						errorMessage: '请输入手机号',
					},
					// 对username字段进行长度验证
					{
						length: 11,
						errorMessage: '手机号账号长度不符合',
					}
				],
			  },
			
			 
			},
			btnContent:'获取验证码',
			focusMobile:true
		}
	},
	onLoad() {
		this.form = JSON.parse(JSON.stringify(this.user))
	},
	methods:{
		/**
		//获取验证码
		sendCode(){
			if(! /^1\d{10}$/.test(this.mobile)){
				this.focusMobile = true 
				return uni.showToast({
					title: '手机号码格式不正确',
					icon: 'none',
					duration: 3000
				});
			}

			let reg = /^1[23456789]\d{9$}/
			if( !reg.test(this.mobile) ) return
			// MODIFY_MOBILE
			let key = 'MODIFY_MOBILE'
			sendMessage({
				mobile:Encrypt(this.mobile), //ES21SE2S1E21S2E10
				key:key
			}).then(res => {
				console.log('短信是否发送成功？',res)
				
				
			})
		},
		**/
		//绑定手机号
		bindTap(){
			 this.$refs.formRef.validate().then(res => {
			// 保存当前的用户信息到数据
			this.$request.put('/bindMobile', this.form).then(res => {
								 
								if (res.code === '200') {
									uni.showToast({
										icon: "success",
										title: '绑定成功'
									})
								uni.setStorageSync('weather2024', this.form)  // 更新浏览器缓存的用户信息	
								setTimeout(function(){
									uni.switchTab({
										url: '/pages/index/index'
									})
								},1500)
								
							
								} else {
									uni.showToast({
										icon: "error",
										title: res.msg
									})
								}
							})
		
		})
	}
},
}
</script>

<style>
.body {
    width: 80%;
    height: 100%;
    margin: 0 auto;
}

.title {
    width: 100%;
    margin: 160rpx 0;
    font-size: 54rpx;
    text-align: center;
}

/* 输入框样式 */
.phone-content {
    display: flex;
    align-items: center;
    padding: 0 25rpx;
    margin-bottom: 24rpx;
    height: 90rpx;
    background: #F7F7F7;
    border-radius: 15rpx;
}

.phone-prefix {
    margin-right: 20rpx;
    font-size: 30rpx;
    font-weight: bold;
}

.input {
    font-size: 30rpx;
}

.captcha-content {
    display: flex;
    height: 90rpx;
    justify-content: space-between;
}

.captcha {
    width: 58%;
}

.verification-btn {
    width: 40%;
}

.verification-code {
    margin: 5rpx 0;
    line-height: 80rpx;
    font-size: 26rpx;
}

.getphonenumber {
    line-height: 80rpx;
    background-color: black;
    color: #F7F7F7;
    font-size: 26rpx;
    margin-top: 160rpx;
}
.bind-btn {
    line-height: 80rpx;
    background-color: black;
    color: #F7F7F7;
    font-size: 26rpx;
    margin-top: 40rpx;
}
.dialog-p{
    padding: 40rpx;
}
</style>